<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章信息展示</title>
    <style>
      body {
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #404040;
      }
      .wrap {
        width: 600px;
        margin: 0 auto;
      }

      .news-list {
        width: 600px;
      }

      .news {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #999;
      }

      .info {
        display: flex;
        width: 200px;
        justify-content: space-between;
        font-size: 12px;
        color: #888;
      }

      .tips {
        display: flex;
        width: 60px;
        justify-content: space-between;
      }
      .news-list {
        min-height: 686px;
      }
      .news-list li:nth-child(5) {
        border-bottom: none;
      }
      .pagination {
        display: flex;
        width: 300px;
        text-align: center;
        background-color: rgb(252, 238, 238);
        border-radius: 25px;
        overflow: hidden;
        margin: 0 auto;
      }
      .pagination a {
        width: 30px;
        line-height: 30px;
        color: #404040;
        flex: 1;
      }
      .pagination a:nth-child(1) {
        transform: rotate(-45deg);
      }
      .pagination .next {
        transform: rotate(45deg);
      }
      .pagination a:hover {
        color: rgb(247, 73, 73);
      }
      .newsContainer {
        width: 400px;
        float: right;
      }
      li img {
        width: 140px;
        height: 88px;
      }
    </style>
    <script src="./ajax.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div class="wrap">
      <ul class="news-list">
        <li class="news">
          <a href="javascript:;">
            <img src="./img/img.png" alt="" />
          </a>
          <div class="newsContainer">
            <h3>
              <a href="javascript:;" class="title"
                >18人死伤！韩国一男子纵火后持凶器伤害避险邻居</a
              >
            </h3>
            <div class="info">
              <span class="tips"
                ><span>纵火</span><span>韩国</span><span>逮捕</span></span
              >
              <!-- <span class="line"></span> -->
              <span class="time">| &nbsp;&nbsp;1小时前</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <a href="javascript:;" class="prev">⌜</a>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;" class="next">⌝</a>
      </div>
    </div>
    <script>
      // let ulEle = document.querySelector(".news-list");
      // let p = window.location.search.substr(3);
      // ajax({
      //   url: "./addnew.php",
      //   dataType: "json",
      //   data: { perpage: 5, p },
      //   success(res) {
      //     console.log(res);
      //     renderDom(res);
      //   },
      // });
      // function renderDom(data) {
      //   ulEle.innerHTML = "";
      //   data.forEach((item) => {
      //     let liEle = document.createElement("li");
      //     liEle.innerHTML = `
      //     <a href="javascript:;">
      //       <img src="${item.photo}" alt="" />
      //     </a>
      //     <div class="newsContainer">
      //       <h3>
      //         <a href="javascript:;" class="title"
      //           >${item.content}</a
      //         >
      //       </h3>
      //       <div class="info">
      //         <span class="tips"
      //           ><span>${item.types}</span><span>${item.country}</span></span
      //         >
      //         <!-- <span class="line"></span> -->
      //         <span class="time">| &nbsp;&nbsp;1小时前</span>
      //       </div>
      //     </div>
      //   `;
      //     ulEle.appendChild(liEle);
      //   });
      // }

      // getPagination();
      // let paginationEle = document.querySelector(".pagination");
      // // 获取分页的总页数
      // function getPagination() {
      //   ajax({
      //     url: "getpage.php",
      //     dataType: "json",
      //     success(res) {
      //       console.log(res);
      //       // 循环生成页码；
      //       let str = ' <a href="javascript:;" class="prev">⌜</a>';
      //       for (let i = 1; i <= res.p; i++) {
      //         str += `<a href="index.html?p=${i}">${i}</a>`;
      //       }
      //       str += '<a href="javascript:;" class="next">⌝</a>';
      //       paginationEle.innerHTML = str;
      //     },
      //   });
      // }
      let newListEle = document.querySelector(".news-list");
      let p = window.location.search.substr(3);
      // console.log(p);

      // 发送ajax 请求数据
      ajax({
        url: "getlist.php",
        dataType: "json",
        data: {
          perpage: 5,
          p,
        },
        success(res) {
          console.log(res);
          renderDom(res);
        },
      });

      function renderDom(data) {
        newListEle.innerHTML = "";
        // 根据数据来渲染视图；
        data.forEach((item) => {
          let liEle = document.createElement("li");
          liEle.className = "news";
          liEle.innerHTML = ` <a href="javascript:;">
                    <img src="${item.imgFileUrl}" alt="">
                </a>
                <div class="newsContainer">
                    <h3>
                        <a href="detail.html?id=${item.id}" class="title">${item.title}</a>
                    </h3>
                    <div class="info">
                        <span class="tips"><span>${item.typeValue}</span><span>${item.country}</span></span>
                        <!-- <span class="line"></span> -->
                        <span class="time">| &nbsp;&nbsp;${item.addtime}</span>
                    </div>
                </div>`;
          newListEle.appendChild(liEle);
        });
      }

      getPagination();
      let paginationEle = document.querySelector(".pagination");
      // 获取分页的总页数
      function getPagination() {
        ajax({
          url: "getpage.php",
          dataType: "json",
          success(res) {
            console.log(res);
            // 循环生成页码；
            let str = ' <a href="javascript:;" class="prev">⌜</a>';
            for (let i = 1; i <= res.p; i++) {
              str += `<a href="index.html?p=${i}">${i}</a>`;
            }
            str += '<a href="javascript:;" class="next">⌝</a>';
            paginationEle.innerHTML = str;
          },
        });
      }
    </script>
  </body>
</html>
